<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分数滑槽</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background: #f2f2f2;
        }
        /* 设置外部容器 */

        .box0 {
            width: 520px;
            height: 20px;
            background: #787878;
            text-align: center;
            margin: 100px auto ;
            border-radius: 10px;
        }
        /* 设置进度条容器 */
        .box1 {
            height: 20px;
            width: 520px;
            background: #e4a348;
            position: relative;
            border-radius: 10px;
            /* overflow: hidden; */
        }
        /* 设置进度条显示颜色 */
        .box2 {
         width:0;
         height: 100%;
         background-color: pink;

       }
       /* 设置进度条右侧圆点 */
        .box3 {
           width: 20px;
           height: 20px;
           position: absolute;
           border-radius: 50%;
           background-color: aquamarine;
        }

        .data {
            height: 30px;
            width: 80;
            position: absolute;
            left: 508px;
            top: 65px;
            text-align: center;
            font-size: 12px;
            text-align: center;
            line-height: 24px;
        }
        #show{
            position: relative;
            left: 270px;
            top:-20px
            
        }
    </style>
</head>

<body>
    <!-- 分数显示 -->
    <div class="data"></div>
    <!-- 外部容器 -->
    <div class="box0">
        <!-- 包裹进度条 -->
      <div class="box1">
        <!-- 进度条 -->
        <div class="box2">
            <!-- 进度条右边圆角 -->
            <div class="box3"></div>           
        </div>
      </div> 
      <!-- 设置进度条默认显示% -->
      <span id="show">0%</span>
    </div> 
    
    
</body>
<script>
    // 先为全局对象window添加onload事件，让js代码后加载，之后的代码全部写在里面
   window.onload = function() {

    const box0 = document.querySelector('.box0')

    const box1 = document.querySelector('.box1')

    const data = document.querySelector('.data')
    // 获取box2对象
    const box2 = document.querySelector('.box2')
    // 获取show对象
    const show = document.querySelector('#show')
    // 获取box3对象
    // 为进度条右侧圆点绑定鼠标按下事件
    const box3 = document.querySelector('.box3')
    box3.onmousedown = function(e) {
        e = e || window.e
        // 获取圆点偏移量
       let box2Left = e.clientX - this.offsetLeft
       //  为右侧圆点绑定拖动事件
       document.onmousemove = function(e) {
        e = e || window.e
        // 获取鼠标坐标
        let box2X = e.clientX - box2Left

        // 暂停拖动(如果拖动条超出范围，则停止拖动)
        if(box2X <= 0){
            box2X = 0
        } else if(box2X >= 500) {
            box2X = 500
        }
        console.log(box2X);
        box3.style.left = box2X + 'px';
       // 显示进度条
        box2.style.width = box2X + 'px';
       // 显示进度条百分比
        show.innerHTML = Math.round(box2X/5) +"%";
        data.innerHTML ='分数：' + Math.round(box2X/5) +'分';

       }  

       // 右侧圆点绑定鼠标抬起事件
        document.onmouseup = function(e) {
        e = e || winodw.e
        // 取消鼠标移动事件
        document.onmousemove = null 
        // 取消鼠标抬起事件
        document.onmouseup = null
    };

    //    鼠标点击事件
    box1.onclick = function(e) {
        e = e || window.e
        
    }

    return false
     
    };
   
   }
</script>

</html>